<template>
  <div class="left-charts">
    <div class="filter-box">
      <strong>实体类型:</strong>
      <CheckboxGroup @on-change="checkCg('type')" style="display: inline; margin-right: 20px;" v-model="objType">
        <Checkbox :label="1">企业</Checkbox>
        <Checkbox :label="2">个人</Checkbox>
      </CheckboxGroup>

      <strong>实体关系:</strong>
      <CheckboxGroup @on-change="checkCg('relation')" style="display: inline" v-model="objRelation">
        <Checkbox :label="1">股权关系</Checkbox>
        <Checkbox :label="2">资金关系</Checkbox>
      </CheckboxGroup>
    </div>
    <div class="chart-box" ref="chartBox"></div>

    <div v-show="menuShow" class="chart-menu" :style="{top: pageTop, left: pageLeft}" ref="chartMenu" @blur="divBlur"  tabindex="2">
      <span @click="excavateFn">上下游挖掘</span>
    </div>
  </div>
</template>

<script>
import { bus } from "./bus";

import { Checkbox, CheckboxGroup } from "iview";
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入关系图
require("echarts/lib/chart/graph");

export default {
  components: {
    Checkbox,
    CheckboxGroup
  },
  data() {
    return {
      isHold: false,
      myChart: null,
      nowChartIndex: -1,
      menuShow: false,
      objType: [1, 2],
      objRelation: [1, 2],
      dataMap: {},
      datas: [],
      linkArr: [],
      links: [], 
      nowId: '',
      pageTop: '0',
      pageLeft: '0'
    };
  },
  methods: {
    initChart() {
      var self = this;

      if(!self.myChart)
      {
        self.myChart = echarts.init(self.$refs.chartBox);
      }
      
      var option = {
        series: [
          {
            type: "graph",
            layout: "force",
            draggable: true,
            animation: false,
            focusNodeAdjacency: false,
            roam: true,
            edgeSymbol: ['none', 'arrow'],
            edgeSymbolSize: 6,
            lineStyle: {
              curveness: .3
            },
            force: {
              repulsion: 200,
              edgeLength: [80, 220]
            },
            data: self.datas,
            links: self.links
          }
        ]
      };

      self.myChart.setOption(option);

      self.myChart.off('click');
      self.myChart.off('mouseover');
      self.myChart.off('mouseout');
      self.myChart.off('contextmenu');

      self.myChart.on('click', function (params){
        bus.$emit('chartClick', params);
        self.isHold = true;
        self.isFocus('focusNodeAdjacency', params.dataIndex);
        self.nowChartIndex = params.dataIndex;
      });

      self.myChart.on('mouseover', function (params){
        if(!self.isHold)
        {
          self.isFocus('focusNodeAdjacency', params.dataIndex);
        }
      });

      self.myChart.on('mouseout', function (params){
        if(!self.isHold)
        {
          self.isFocus('unfocusNodeAdjacency', params.dataIndex);
        }
      });

      self.myChart.on('contextmenu', function (data){
        var id = data.data.id;
        var x = data.event.event.x;
        var y = data.event.event.y;
        self.nowId = id;
        self.menuShow = true;
        setTimeout(function (){
          self.$refs.chartMenu.focus();
          self.pageLeft = (x+10) + 'px';
          self.pageTop = y + 'px';
        }, 0);
      })

    },

    isFocus(sType, index) {
      var self = this;
      self.myChart.dispatchAction({  
        type: sType,    
        dataIndex: index 
      }); 
    },

    checkCg(str) {
      var self = this;
      var arr = [];

      function filterFn(name, obj){
        var arr = [];
        for(let key in obj)
        {
          let item = obj[key];
          self[name].map(function (nType){
            if (item[name] == nType)
            {
              arr.push(item);
            }
          });
        }
        return arr
      }

      if(str === 'type')
      {
        arr = filterFn('objType', self.dataMap);
        self.datas = arr;
      }
      else
      {
        arr = filterFn('objRelation', self.linkArr);
        self.links = arr;
      }

      self.initChart();
    },

    scrollFunc (e) {  
      var self = this;
      self.menuShow = false;
    },

    excavateFn() {
      var self = this;
      self.menuShow = false;

      var id = self.nowId;
      bus.$emit('getExcavate', id);
    },

    divBlur() {
      var self = this;
      self.menuShow = false;
    }
  },
  mounted() {
    var self = this;

    self.$refs.chartBox.oncontextmenu = function () { return false; }; 

    bus.$on("addNode", function(data) {
      if (!self.dataMap[data.id]) {
        data.label = {
          show: true,
          position: "right"
        };
        data.itemStyle = {
          normal: {
            color: data.color
          }
        };
        data.symbolSize = data.value;

        self.dataMap[data.id] = data;
        self.datas.push(data);
        self.links.push(data.links);
        self.linkArr.push(data.links);

        self.initChart();
      }
    });

    bus.$on('chartReSize', function (width, height){
      if(self.myChart)
      {
        self.myChart.resize();
      }
    });

    bus.$on('unhold', function (){
      self.isFocus('unfocusNodeAdjacency', self.nowChartIndex);
      self.isHold = false;
      self.nowChartIndex = -1;
    });

    window.onmousewheel = document.onmousewheel = self.scrollFunc;
  }
};
</script>

<style scoped>
.filter-box {
  position: fixed;
  top: 20px;
  left: 300px;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  z-index: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
}
.chart-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.chart-menu {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  background: rgba(48, 106, 223, 0.8);
  border: 0 solid #0052ff;
  border-radius: 3px;
  color: #fff;
  padding: 15px;
  outline: none;
}
.chart-menu span {
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.chart-menu span:hover {
  color: #ff0;
}
</style>
